<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>IPCLiveServer</title>
    <link rel="icon" href="favicon.png">
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <script src="mpegts.js"></script>
</head>

<body>
<video name="video-element" muted autoplay style="width:100%;background: black"></video>
<script>

    document.addEventListener('DOMContentLoaded', function () {
        if (!mpegts.getFeatureList().mseLivePlayback) {
            alert("抱歉，您的浏览器不支持此功能。请尝试使用其他浏览器或升级您的浏览器版本。");
            window.location.href = "about:blank";
        }
    });

    function getParams() {
        let index = window.location.href.indexOf('=')
        rtsp = window.location.href.substring(index + 1)
        player_start(rtsp)
    }

    getParams()

    function player_start(params) {
        const videoElement = document.querySelector('video[name="video-element"]');
        // If you use the HTTP-FLV protocol
        const serverUrl = window.location.protocol + '//' + window.location.hostname + ':' + window.location.port + '/IPCLiveServer/live?url=' + params;
        // If you use the WS-FLV protocol
        //const serverUrl = 'ws://' + window.location.hostname + ':' + window.location.port + '/IPCLiveServer/websocket/live?' + inputElement.value;
        if (typeof player !== "undefined") {
            if (player != null) {
                player_destroy();
            }
        }
        player = mpegts.createPlayer({
            type: 'flv',
            isLive: true,
            hasAudio: false,
            hasVideo: true,
            url: serverUrl
        }, {
            enableWorker: true,
            enableStashBuffer: false,
            stashInitialSize: 128,
            liveBufferLatencyChasing: true,
            autoCleanupSourceBuffer: true,
            autoCleanupMaxBackwardDuration: 20,
            autoCleanupMinBackwardDuration: 10
        });
        mpegts.LoggingControl.enableAll = false;
        player.attachMediaElement(videoElement);
        player.load();
        player.play();
    }

    function player_destroy() {
        player.unload();
        player.detachMediaElement();
        player.destroy();
        player = null;
    }

    const video = document.querySelectorAll('video')[0]
    // 添加双击全屏放大功能
    video.addEventListener('dblclick', () => {
        if (!document.fullscreenElement) {
            if (video.requestFullscreen) {
                video.requestFullscreen()
            } else if (video.mozRequestFullScreen) {
                // 兼容火狐浏览器
                video.mozRequestFullScreen()
            } else if (video.webkitRequestFullscreen) {
                // 兼容谷歌浏览器和Safari
                video.webkitRequestFullscreen()
            }
        } else {
            if (document.exitFullscreen) {
                document.exitFullscreen()
            } else if (document.mozCancelFullScreen) {
                // 兼容火狐浏览器
                document.mozCancelFullScreen()
            } else if (document.webkitExitFullscreen) {
                // 兼容谷歌浏览器和Safari
                document.webkitExitFullscreen()
            }
        }
    })

</script>

</body>

</html>